\section{Antecendetes y contexto}

\label{sec:2-1AntecedentesYContexto}

La base del desarrollo de este proyecto se centra en 2 de las asignaturas cursadas a lo largo del Grado en Ingeniería Informática, que son Gestión Avanzada de la Información (GAI) y Desarrollo Industrial del Software (DIS).

En la primera de ellas se estudian conceptos relacionados con la Web 2.0, y donde se investiga en bastante profundidad aspectos relacionados con la aumentación web. En la segunda de ellas se estudian conceptos relacionados con el desarrollo basado en modelos.

Aún así, también el poder llevar este proyecto a cabo ha requerido de la necesidad de nociones aprendidas a lo largo de otras asignaturas como por ejemplo Interacción Persona Computador, donde se abarcan aspectos relacionados con el desarrollo para usuarios finales y la idea del DIY (Do-it yourself) que se trabaja en este proyecto.

La idea de realizar un editor como WebMakeUp surge del grupo Onekin\footnote{Sitio web del grupo Onekin: http://www.onekin.org/}. El grupo Onekin es un grupo de investigación localizado en la Facultad de Informática de San Sebastián que pertenece a la Universidad del País Vasco/Euskal Herriko Unibertsitatea. Este grupo basa sus estudios en diferentes ámbitos de la ingeniería del software, cómo es la ingeniería de Portlets, lineas de productos software (SPL), en la ingeniería de aplicaciones web y otras más.

Basandonos en el lema de Onekin, \emph{``If you want to go quickly, go alone. If you want to go far, go together.``}, que viene a decir, si quieres ir rápido ve sólo, pero si quieres llegar lejos ve unido; el director de proyecto propuso participar en el proyecto de WebMakeUp junto a compañeros del propio Onekin donde se realizarían muchas de las tareas del mismo en grupo.

La necesidad de crear WebMakeUp surge cuando se detecta que la experiencia del usuario en la web no es completamente satisfactoria. Habitualmente el usuario que entra en un sitio web busca cierta información concreta. Esta información no es igual para todos los usuarios, las necesidades suelen ser diferentes y es importante que disponga de ella cuando entra sin realizar una labor tediosa. Esta puede ser por ejemplo buscar información complementaria en otros sitios webs (concepto relacionado con los Mashup, que se encargan de unir en una misma aplicación servicios de diferentes proveedores).

Para resolver esta problemática se podrían adoptar 2 metodologías, que la resolviera el webmaster o el consumidor de la aplicación web (el usuario). La primera opción es muy costosa y no tendría sentido teniendo en cuenta que el webmaster no siempre conoce las necesidades de cada usuario. Por tanto la responsabilidad recae sobre el propio usuario, que en la mayoría de los casos desconoce el cómo realizar un mod del sitio web. Hacer modding sobre un sitio web se podría asemejar a hacer tunning en un automóvil, donde el coche sigue siendo el mismo que el de fábrica, pero donde se le añaden, retiran o sustituyen componentes haciéndolo más agradable al usuario que lo va a utilizar.

A estos componentes se les puede llamar de diferentes maneras, pero la más habitual es la de widget. Un widget es equiparable a un elemento del dominio. Puede ser un elemento del DOM simple como un input, un texto o una imagen; pero también puede constituirse por elementos más complejos, por ejemplo un contenedor con elementos simples en su interior o incluso contenedores con varios contenedores dentro. Estos elementos a su vez pueden tener eventos asociados, que pueden servir para interaccionar con otros contenidos del sitio web.

Para comprender mejor todos estos conceptos nos podemos basar en un sencillo ejemplo, como puede ser el portal de la UPV/EHU\footnote{Sitio web de la UPV/EHU: \url{http://www.ehu.es}}.

\begin{figure}[htb!]
\begin{center}
\includegraphics[width=0.85\textwidth]{figs/2-PortalEhu.png}
\caption{Portal de la \emph{UPV/EHU}.}
\label{fig:2-PortalEhu}
\end{center}
\end{figure}

Supongamos que somos un estudiante de la universidad, que está en su segundo año de carrera y que los temas en los que está centrado son básicamente cursar las asignaturas. En la Figura \ref{fig:2-PortalEhu} observamos que hay resaltados 3 widgets: en el panel izquierdo un contenedor relacionado con el rectorado y la dirección, en el centro una noticia relacionada para estudiantes de más de 45 años y en la derecha algunos elementos con links hacia temas de master y doctorado. Estos widgets son susceptibles de ser cambiados en base al perfil del usuario, que lo que suele buscar al entrar al sitio web es básicamente información de las asignaturas, el moodle y correo electrónico.

Por tanto, podría ser interesante eliminar el widget nº1, sustituir el nº2 por otro contenido más interesante cómo noticias sobre actividades para creditos de libre elección y modificar el nº3 añadiendo accesos al correo y moodle.

El realizar esta tarea, aunque se supone sencilla a simple vista requiere de bastantes conocimientos a nivel de programación y tiempo de desarrollo. Aquí es donde WebMakeUp tiene cabida, ofreciendo un DSL sencillo para un usuario final que en apenas 30 minutos podría realizar el cambio y generar a partir de él una extensión de Chrome fácilmente instalable.
